<template>
  <div class="basic-form-warp" :style="styleHeight()">
    <el-form :inline="true"  ref="" size="small" style="height:51px;overflow:hidden;">
      <el-form-item label="审批人姓名">
        <el-input placeholder="审批人姓名" v-model="leavesQueryParam.userName"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
        <el-button type="info" icon="el-icon-refresh-left" @click="">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table
        :border="true"
        ref="multipleTable"
        :data="allLeaves"
        tooltip-effect="dark"
        style="width: 100%"
        :default-sort = "{}"
    >
      <el-table-column
          type="selection"
          width="">
      </el-table-column>
      <el-table-column
          prop="userName"
          label="审批人姓名"
          width="180">
      </el-table-column>
      <el-table-column
          prop="banJi"
          label="审批人班级"
          width="180">
      </el-table-column>
      <el-table-column
          prop="phone"
          label="紧急电话"
          width="180">
      </el-table-column>
      <el-table-column
          prop="startTime"
          label="开始时间">
      </el-table-column>
      <el-table-column
          prop="endTime"
          label="结束时间">
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true"
          prop="reason"
          label="审批内容">
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          {{status[scope.row.status]}}
        </template>
      </el-table-column>
      <el-table-column
          label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="success "
              @click="addMenu(scope.row.id)">编辑</el-button>

<!--          <el-button-->
<!--              size="mini"-->
<!--              type="danger"-->
<!--              @click="handleDelete(scope.row.id)">删除</el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="leavesQueryParam.pageNumber"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="leavesQueryParam.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="PageInfo.total"
          :background="true"
      >
      </el-pagination>
    </div>
    <el-dialog
        :before-close="handleClose"
        title="出行审批审核"
        :visible.sync="dialogVisible"
        width="50%"
    >
      <div style="margin: 20px;"></div>
      <el-form   :model="formLabelAlign">
        <el-form-item label="审批人" >
          <el-input disabled="" v-model="userName"></el-input>
        </el-form-item>
        <el-form-item label="行政班级">
          <el-input disabled="" v-model="banJi"></el-input>
        </el-form-item>
        <el-form-item label="回执内容">
          <el-input :rows="8" v-model="leaves.message"  class="texts" type="textarea" ></el-input>
        </el-form-item>
        <el-form-item label="审核状态">
          <el-select v-model="leaves.status" placeholder="请选择">
            <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.value"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false" >取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import { getSession } from "@/utils/storage";
import {getAllLeavesByParam,getLeaves ,saveLeaves} from '@/api/leaves/index'
export default {
  name: 'basicForm',
  data() {
    return {
      status:['未审核','审核通过','审核未通过'],
      leavesQueryParam:{
        pageNumber:1,
        pageSize:10,
        fid:'',
        userName:''
      },
      allLeaves: [],
      leaves:{},
      dialogVisible:false,
      PageInfo: {
        total:0,
      },
      formLabelAlign: {
        name: '',
        region: '',
        type: ''
      },
      userName:'',
      banJi:'',
      options: [{
        id: 1,
        value: '审核通过'
      },
        {
          id: 2,
          value: '审核不通过'
        }],
    }

  },
  // 组件缓存才在这里初始化事件等
  activated() {
    this.styleHeight()
  },
  mounted() {
    // this.setTableHeight()
    this.getUserInfo();
    this.getAllLeaves();

  },
  methods: {
    search(){
      this.getAllLeaves();
    },
    handleSizeChange(val) {
      this.leavesQueryParam.pageSize=val;
      this.getAllLeaves();
    },
    handleCurrentChange(val) {
      this.leavesQueryParam.pageNumber=val;
      this.getAllLeaves();
    },
    //获取所有分页数据
    getAllLeaves(){
      getAllLeavesByParam(this.leavesQueryParam).then(res=>{
        this.allLeaves = res.data.list
        this.PageInfo.total = res.data.page.total;
      }).catch()
    },
    save(){
      saveLeaves(this.leaves).then(res=>{
        this.dialogVisible=false
        this.getAllLeaves();

      }).catch()
    },
    //获取缓存
    getUserInfo(){
      this.leavesQueryParam.fid=getSession('userInfo').finstructor.id;
    },
    // 动态高度，适配各布局。单页面的画，高度设为100%即可。
    styleHeight() {
      let { layout, isTagsView } = this.$store.state.layoutConfig;
      if (layout === 'fashion' || layout === 'strange') {
        if (isTagsView) {
          return {
            height: `calc(100vh - 114px)`
          }
        } else {
          return {
            height: `calc(100vh - 80px)`
          }
        }
      } else {
        return {
          height: `calc(100vh - 80px)`
        }
      }
    },

    addMenu(value){
      this.dialogVisible=true;
      this.getLeavesById(value);
    },
    getLeavesById(id){
      getLeaves(id).then(res=>{
        this.leaves = res.data.leaves;
        this.userName=res.data.userName;
        this.banJi=res.data.banJi;
      }).catch()
    },
    handleClose(done){
      done();
    }
  }
}
</script>

<style scoped lang="scss">
.page {
  text-align: center;
  margin-top: 20px;
}
.basic-form-warp {
  border-radius: 0px;
  border: 1px solid #ebeef5;
  background-color: #fff;
  overflow: auto;
  color: #303133;
  transition: 0.3s;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03) !important;
  margin: 15px;
  .basic-form-warp-box {
    max-width: 700px;
    margin: 30px auto;
    .line {
      text-align: center;
    }
    ::v-deep .el-upload {
      width: 100%;
      .el-upload-dragger {
        width: 100%;
      }
    }
  }
}
</style>